<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
		
		<!-- 1.导入JS函数类库 -->
		<script src="jquery-3.6.0.min.js"></script>
		<!-- 2.编辑JS发起Ajax请求 -->
		<script>
			//循环写法
				/**
				* //js 实现for循环
					for(var i=0;i<data.length;i++){
						var user = data[i]
						console.log(user)
					}
					in关键字  index代表下标
					for(var index in data){
					console.log(data[index])
					}
					//增强for写法 of 表示直接获取遍历内容
					for(var user of data){
							console.log(user)
					}
					*/
						
						
			//让页面加载完成之后再次执行  
			//语法: 函数式编程
			$(function(){
				//alert("页面加载完成,jQuery调用成功!!!!")
				//利用Ajax的get请求方式   
				//http://localhost:8080/getUser 全部数据
				//将数据以表格的形式展现
				//种类: 1.$.get()   2.$.post() 3.$.getJSON()  4.$.ajax()
				//js中可以根据返回值的数据动态匹配类型
				//$.get("url地址","参数",function(data){},"返回值类型")
				
				//参数写法1: key=value&key2=value2
				var name = "张三"
				var age = 18
				var args1 = "name="+name + "&age="+age
				//参数对象写法: {key:value,key2:value2}
				var args2 = {name:name,age:age}
				//如果有参数,则直接添加,如果没有参数,则直接省略
				// $.get(url,function(data){
				// 	//js 实现for循环
				// 	for(var i=0;i<data.length;i++){
				// 		var user = data[i]
				// 		console.log(user)
				// 	}
				var url = "http://localhost:8080/getUser";
				$.get(url,function(data){
				//增强for写法 of 表示直接获取遍历内容
					for(var user of data){
						var id = user.id
						var name = user.name
						var age = user.age
						var sex = user.sex
						var tr = "<tr align='center'><td>"+id+"</td><td>"
						+name+"</td><td>"+age+"</td><td>"+sex+
						"</td></tr>"
						
						//利用ID选择器定位table标签
						//append 向每个匹配的元素内部追加内容。
						$("#tab1").append(tr)
						}
				
				})
				
				
				/**
					* $.ajax相关说明
					* 1.{key:value}
					* 2.type: ajax请求的方式 get/post/put/delete
					* 3.简化$.get(..) $.post(...)  $.getJSON(...)
					* 4.url: 远程服务器地址
					* JSONP: JS端解决跨域问题的一种机制. 现在几乎淘汰了
					* cache: true 默认值为true
					* async: true 默认异步!!!!
					*/
						$.ajax({
							type: "get",
							url: "http://localhost:8080/getUser",
							//data: {key:value,key2:value2}
							dataType: "json",
							async: false,	//异步改为同步
							cache: false,  
							success: function(result){  //200
							console.log(result)
							},
							error : function(){
								alert("服务器正忙,请稍后!")
							}
					})
							
			})
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" width="700px" align="center">
			<tr>
				<td colspan="4" align="center"><h1>表格数据</h1></td>
			</tr>
			<tr align="center">
				<td>ID编号</td>
				<td>名称</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			<!-- <tr align="center">
				<td>100</td>
				<td>测试数据1</td>
				<td>18</td>
				<td>女</td>
			</tr>
			<tr align="center">
				<td>100</td>
				<td>测试数据2</td>
				<td>18</td>
				<td>女</td>
			</tr> -->
		</table>
		
		
	</body>
</html>